<template>
<div class="videobox">
	<video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
 
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 @ended="onPlayerEnded($event)"
                 @waiting="onPlayerWaiting($event)"
                 @playing="onPlayerPlaying($event)"
                 @loadeddata="onPlayerLoadeddata($event)"
                 @timeupdate="onPlayerTimeupdate($event)"
                 @canplay="onPlayerCanplay($event)"
                 @canplaythrough="onPlayerCanplaythrough($event)"
 
                 @statechanged="playerStateChanged($event)"
                 @ready="playerReadied">
  </video-player>
</div>
  
</template>
 
<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "/static/images/author.jpg",
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      onPlayerPlay(player) {

      },
      onPlayerPause(player) {

	},
	onPlayerEnded(){

	},
	onPlayerPlaying(){

	},
	onPlayerLoadeddata(){

	},
	onPlayerTimeupdate(){

	},
	onPlayerCanplay(){

	},
	onPlayerCanplaythrough(){

	},
    playerStateChanged(playerCurrentState) {

	},
 
      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)

      }
    }
  }
</script>
<style lang="less" >

	.videobox{
		height: 100%;
		width: 1100px;
		margin: 30px auto 0;
		.video-player-box{
			width: 100%;
			min-height: 638px;
			height: 100%;
			
		}
	}

	.video-js .vjs-big-play-button{
		left: 50%!important;
		top: 50%!important;
		transform: translate(-50%, -50%)!important;
	}
	
</style>